<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <script src="../../layui/layui.js"></script>
  <style>
    .layui-menu-item-checked::after {
      display: none;
    }

    .layui-menu-item-checked * {
      color: green;
    }

    .layui-panel {
      box-shadow: none;
    }
  </style>
  <style>
    a {
      color: blueviolet;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/11.8.0/styles/vs.min.css">
  <script src="https://cdn.staticfile.org/highlight.js/11.8.0/highlight.min.js"></script>
</head>

<body>
  <div style="display: flex;align-items: flex-start;padding-bottom: 20px;box-sizing: border-box;">
    <div style="width: 100%;">
      <h1>弹窗</h1>
      <hr>
      <blockquote class="layui-elem-quote">
        <p>纯原生 <code>CSS</code>+<code>js</code> 实现的图片预览</p>
        <span>下载JS文件：</span>
        <a target="_blank" download href="./RePreviewImage.js">RePreviewImage.js</a><br>
      </blockquote>
      <br><br>

      <h2 id="KTDTC">图片预览</h2>
      <hr>

      <pre class="model-box layui-code" lay-options="{}">
<link rel="stylesheet" href="../ReButton/ReButton.css">
<script src="./RePreviewImage.js"></script>

<button class="re-btn dd">点击预览</button>
<script>
  document.querySelector(".re-btn.dd").onclick = function () {
    RePreviewImage({
      imgs: [
        "http://cdn.yfblog.asia/image/YFBLOG_1693059793600.svg",
        "http://cdn.yfblog.asia/image/YFBLOG_1693059985686.png",
        "http://cdn.yfblog.asia/image/YFBLOG_1693060810980.svg",
      ],
      index: 1,
      callback(...e) {
        console.log(e);
      }
    });
  }
</script>
      </pre>

    </div>
  </div>
</body>
<script>
  layui.code({
    elem: '.model-box',
    preview: "iframe",
    layout: ['preview', 'code'],
    encode: false,
    done() {
      layui.$("iframe").parent(".layui-code-item").height("700px")
    },
    langMarker: true,
    lang: "html",
    highlighter: "hljs",
    codeRender: function (code, opts) {
      return hljs.highlight(code, { language: opts.lang }).value;
    }
  });
</script>

</html>